<!--
 * @Descripttion: 员工自选
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 18:09:32
-->
<template>
  <div class="lb-staff-goods">
    <top-nav />
    <div class="form-search">
      <el-form
        @submit.native.prevent
        :model="ruleForm"
        :rules="ruleFormRules"
        ref="ruleForm"
        label-width="120px"
      >
        <el-form-item :label="tips[1]" prop="myshop_switch">
          <el-radio-group v-model="ruleForm.myshop_switch">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[2] }}</lb-tool-tips>
        </el-form-item>
        <div class="space-lg"></div>
        <el-form-item label="数量限制" prop="my_shop_limit">
          <el-input-number
            class="lb-input-number"
            v-model="ruleForm.my_shop_limit"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入数量"
          ></el-input-number>
          <lb-tool-tips>{{ tips[3] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitForm">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tips: {
        1: `我的${this.$t('menu.Malls')}`,
        2: `后台开启“我的${this.$t('menu.Malls')}”后，员工选择的商品将会展示到该员工的${this.$t('menu.Malls')}里面，若没有选择任何商品将不会展示任何商品`,
        3: `当数量限制配置了之后, 员工选择我的${this.$t('menu.Malls')}里面的商品数量上限将由这里的设置决定, 0则不限制`
      },
      ruleForm: {
        myshop_switch: 1,
        my_shop_limit: ''
      },
      ruleFormRules: {
        myshop_switch: { required: true, type: 'number', message: '请选择', trigger: 'blur' },
        my_shop_limit: { required: true, type: 'number', message: '请输入数量', trigger: 'blur' }
      }
    }
  },
  created () {
    this.getSettingInfo()
  },
  methods: {
    /**
     * @method 获取设置数据回显
     */
    getSettingInfo () {
      this.$api.orderSettingInfo().then(res => {
        if (res.code === 200) {
          console.log(res)
          this.ruleForm.myshop_switch = res.data.myshop_switch
          this.ruleForm.my_shop_limit = res.data.my_shop_limit
        }
      })
    },

    /**
     * @method 保存设置
     */
    submitForm () {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          let { ruleForm } = this
          this.$api.orderSetting(ruleForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successOper'))
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-staff-goods {
  width: 100%;
  .form-search {
    padding: 20px;
    .el-form {
      width: 100%;
      .el-form-item {
        margin-bottom: 5px;
        .el-input,
        .el-input-number {
          width: 300px;
        }
      }
      .last-form-item {
        margin-top: 30px;
      }
      .item-tips {
        margin-left: 120px;
        margin-bottom: 24px;
        color: #999999;
      }
    }
  }
}
</style>
